<template>
  <div class="index-container">
    <el-drawer v-model="dialogFormVisible" size="30%" @close="close">
      <template #header>
        <h4>{{ title }}客户信息</h4>
      </template>
      <template #default>
        <vab-card shadow="hover">
          <template #header>
            <div class="page-tools">
              <div><span>自定义导出字段</span></div>
              <div>
                <el-button type="primary" @click="submitForm('formRef')">
                  导出
                </el-button>
              </div>
            </div>
          </template>

          <el-checkbox
            v-model="basicCheckAllEx"
            :indeterminate="isbasicminateEx"
            @change="handleBasicAllChangeEx"
          >
            全选
          </el-checkbox>

          <el-checkbox-group
            v-model="basicValsEx"
            @change="handleCheckedBasicChangeEx"
          >
            <el-checkbox
              v-for="(item, index) in basicNeed"
              :key="index"
              :label="item.value"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </vab-card>

        <vab-card shadow="hover">
          <template #header>
            <span>历史记录</span>
          </template>
          <div v-for="(item, index) in exportLog" :key="index">
            <div class="page-tools">
              <div>
                <span>{{ item.filename }}</span>
              </div>
              <div>
                <a
                  href="https://qiniu.moudian520.com/export/export_template_2024-06-18_07-34-26.xlsx"
                >
                  <el-button type="text">下载</el-button>
                </a>
              </div>
            </div>
            <el-divider />
          </div>
        </vab-card>
      </template>
    </el-drawer>
  </div>
</template>
<script>
  import { exportTemplate, exportLog } from '@/api/custom'
  export default defineComponent({
    name: 'ImportDrawer',

    setup() {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        exportLog: [],
        title: '',
        dialogFormVisible: false,
      })

      // 多选框
      const basicCheckAllEx = ref(false)
      const isbasicminateEx = ref(false)
      const basicValsEx = ref([])
      const basicNeed = ref([
        { label: '昵称', value: 'username' },
        { label: '姓名', value: 'realname' },
        { label: '性别', value: 'gender' },
        { label: '电话', value: 'mobile' },
        { label: '微信', value: 'weixin' },
        { label: '身高', value: 'height' },
        { label: '体重', value: 'weight' },
        { label: '婚况', value: 'marry' },
        { label: '学历', value: 'education' },
      ])

      const handleBasicAllChangeEx = (val) => {
        basicValsEx.value = val ? basicNeed.value.map((item) => item.value) : []
        isbasicminateEx.value = false
      }
      const handleCheckedBasicChangeEx = (value) => {
        const checkedCountBasicEx = value.length

        basicCheckAllEx.value = checkedCountBasicEx === basicNeed.value.length
        isbasicminateEx.value =
          checkedCountBasicEx > 0 &&
          checkedCountBasicEx < basicNeed.value.length
      }

      const showImport = () => {
        state.title = '导出'
        state.dialogFormVisible = true
      }

      const submitForm = async () => {
        if (basicValsEx.value.length !== 0) {
          const { msg } = await exportTemplate({
            tablesss: basicValsEx.value,
          })
          fetchData()
          $baseMessage(msg, 'success', 'vab-hey-message-success')
        } else {
          $baseMessage('未选中任何字段', 'error', 'vab-hey-message-error')
        }
      }

      const fetchData = async () => {
        try {
          const data = await exportLog()
          state.exportLog = data.data
        } catch (e) {
          $baseMessage(e.message, 'error', 'vab-hey-message-error')
        }
      }

      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        showImport,
        close,
        basicCheckAllEx,
        isbasicminateEx,
        basicValsEx,
        basicNeed,
        handleCheckedBasicChangeEx,
        handleBasicAllChangeEx,
        submitForm,
      }
    },
  })
</script>

<style>
  .page-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
